<template>
   <div class="cart">
     <nav-bar class="nav-bar">
       <div slot="center">购物车({{length}})</div>
     </nav-bar>
    
        <cart-list ></cart-list>
        <bottom-bar></bottom-bar>
   
   </div>
</template>

<script>
import NavBar from 'common/navbar/NavBar'
import CartList from './childComps/CartList'
 import BottomBar from './childComps/BottomBar'
 
import { mapGetters } from 'vuex'
export default {
  name:'Cart',
   data () {
      return {

      };
   },

   components: {
     NavBar,
     CartList,
     BottomBar
    
   },

   computed: {
    //  cartLength(){
    //    return this.$store.getters.cartList.length
    //  }
    ...mapGetters({
      length:'cartCount'
    })
   },

   methods: {}
}
</script>
<style  scoped>
.nav-bar{
  background-color: var(--color-tint);
  color: #fff;
}
.cart{
  height: 100vh;
}
</style>